// frontend/src/components/Welcome.js
export const WelcomeComponent = {
  methods: {
    selectPlatform(platform) {
      this.$emit('select-platform', platform);
    }
  },
  template: `
    <div class="container-fluid p-0">
      <div class="row g-0 min-vh-100">
        <!-- 左侧背景图区域 -->
        <div class="col-lg-7 d-none d-lg-block position-relative">
          <div class="hero-background"></div>
        </div>
        
        <!-- 右侧平台入口区域 -->
        <div class="col-lg-5 col-12 d-flex align-items-center justify-content-center bg-light">
          <div class="container py-5">
            <div class="row justify-content-center">
              <div class="col-12 text-center d-lg-none mb-5">
                <h1 class="display-4 fw-bold text-primary">库美生物信息云平台</h1>
                <p class="lead">专业的生物信息学分析服务和健康管理解决方案</p>
              </div>
              
              <div class="col-md-10 col-lg-9">
                <div class="platform-card-container">
                  <!-- 生物云平台入口 -->
                  <div class="platform-card mb-4">
                    <div class="card border-0 shadow h-100 platform-biocloud">
                      <div class="card-body text-center p-4">
                        <div class="platform-icon bg-primary bg-gradient rounded-circle mb-4 mx-auto d-flex align-items-center justify-content-center">
                          <i class="bi bi-cpu fs-1 text-white"></i>
                        </div>
                        <h3 class="card-title text-primary">生物云平台</h3>
                        <p class="card-text text-muted">
                          专为生物信息学研究设计的高性能计算平台，支持基因组、转录组、蛋白质组等多组学数据分析。
                        </p>
                        <button class="btn btn-primary btn-lg rounded-pill px-4" 
                                @click="selectPlatform('biocloud')">
                          <i class="bi bi-rocket-takeoff me-2"></i>立即体验
                        </button>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 大健康平台入口 -->
                  <div class="platform-card">
                    <div class="card border-0 shadow h-100 platform-health">
                      <div class="card-body text-center p-4">
                        <div class="platform-icon bg-success bg-gradient rounded-circle mb-4 mx-auto d-flex align-items-center justify-content-center">
                          <i class="bi bi-heart-pulse fs-1 text-white"></i>
                        </div>
                        <h3 class="card-title text-success">大健康平台</h3>
                        <p class="card-text text-muted">
                          面向个人健康管理的专业平台，提供基因检测解读、健康风险评估、个性化健康建议等服务。
                        </p>
                        <button class="btn btn-success btn-lg rounded-pill px-4" 
                                @click="selectPlatform('health')">
                          <i class="bi bi-clipboard2-pulse me-2"></i>立即体验
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
};